<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <meta name="description"
          content="This soft blob bounces off the edges of the browser window and can be split into multiple blobs. The HTML5 canvas element is used for visual output."/>
    <meta name="keywords"
          content="hakim, elhattab, hakim el hattab, hakim elhattab, interactive, developer, flash, html5, canvas, web, experiments"/>
    <meta name="author" content="Hakim El Hattab"/>

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width = 670">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <title>Blob - an experiment with soft bouncy physics built using the HTML5 canvas tag.</title>

    <style type="text/css">
        html {
            color: #000;
            background: #222222;
        }

        a {
            cursor: pointer;
        }

        html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        fieldset, img {
            border: 0;
        }

        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal;
        }

        li {
            list-style: none;
        }

        caption, th {
            text-align: left;
        }

        q:before, q:after {
            content: '';
        }

        abbr, acronym {
            border: 0;
            font-variant: normal;
        }

        sup {
            vertical-align: text-top;
        }

        sub {
            vertical-align: text-bottom;
        }

        input, textarea, select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            outline-style: none;
            outline-width: 0pt;
        }

        legend {
            color: #000;
        }

        a:focus, object, h1, h2, h3, h4, h5, h6 {
            -moz-outline-style: none;
            border: 0px;
        }

        strong {
            font-weight: bold;
        }

        @font-face {
            font-family: Delicious;
            font-weight: bold;
            src: url('../../../assets/fonts/Delicious-Bold.otf');
        }

        body {
            overflow: hidden;
            font-family: Georgia, Helvetica, Arial, sans-serif;
            color: #333333;
            font-size: 11px;
        }

        a, a:hover {
            transition: all .08s linear;
            -o-transition: all .08s linear;
            -moz-transition: all .08s linear;
            -webkit-transition: all .08s linear;
            padding: 1px;
        }

        p.noCanvas {
            color: #999999;
            font-size: 24px;
            text-align: center;
            margin-top: 150px;
        }

        #panel {
            position: absolute;
            margin: 5px;
            padding: 5px;
            z-index: 99;
            background-color: #FFFECF;
            border: 1px solid #e1e0af;
        }

        #panel a {
            color: #333333;
            background-color: #FFFECF;
            text-decoration: underline;
        }

        #panel a:hover {
            color: #FFFECF;
            background-color: #333333;
        }

        #panel a.versionLink {
            padding: 1px;
            text-decoration: underline;
        }

        #panel a.versionLink.selected {
            color: #888888;
            text-decoration: none;
        }

        #panel p {
            padding: 0px 5px 5px 5px;
            line-height: 1.6em;
        }

        #panel h2 {
            font-size: 20px;
            font-weight: bold;
            font-family: Delicious, Helvetica, sans-serif;
            padding: 5px 5px 5px 5px;
        }

        #chromeBadge {
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 4px;
        }

        #sharing {
            background-color: #FFFECF;
            position: absolute;
            top: 0;
            right: 0;
            margin: 5px;
            padding: 7px 0 4px 10px;
            z-index: 98;
            border: 1px solid #e1e0af;
        }

        #facebook_button {
            float: left;
        }

        #retweet_button {
            float: left;
        }

        #flattr_button {
            float: right;
            margin: 1px 10px 0 4px;
        }
    </style>

    <style type="text/css">
        #panel {
            position: absolute;
            /* margin: 5px; */
            padding: 5px;
            z-index: 99;
            background-color: #FFFECF;
            border: 1px solid #e1e0af;
            top: 40px;
        }
    </style>
</head>
<body>

<div id="panel">
    <h2>Canvas 水滴</h2>

    <p>双击可以把水滴分离；拖放到一起可以融合；<br/>晃动浏览器可以让水滴跳动；键盘左右键可以切换皮肤；上下键可以变换大小。<br/><b>Shake</b> the browser window to make them
        bounce.<br/>Use the keyboard <b><a id="keyboardUp" href="#">up</a> / <a id="keyboardDown" href="#">down</a></b>
        arrows to change blob size and<br/>the <b><a id="keyboardLeft" href="#">left</a> / <a id="keyboardRight"
                                                                                              href="#">right</a></b>
        arrows to change between skins.</p>
</div>

<canvas id="world"><p class="noCanvas">You need a <a href="http://www.google.com/chrome">modern browser</a> to view
    this.</p></canvas>

<script src="blob.min.js"></script>

</body>
</html>